<template>
    <div>
        <div class="header">
            <img style="width:90px" @click="toPage('/userIndex')" src="../assets/image/logo.png">
            <div class="header1">
                <div @click="toPage('/userIndex')" class="menu-item">首页</div>
                <div @click="toPage('/userEquipment')" class="menu-item">滑雪设备</div>
                <div @click="toPage('/userTrack')" class="menu-item">滑雪赛道</div>
                <div @click="toPage('/userCoach')" class="menu-item">教练展示</div>
                <div @click="toPage('/userOwn')" class="menu-item">个人中心</div>
            </div>
            <div class="header2" v-if="user">
                <div class="header3">{{ user.name }}</div>
                <div class="header4" @click="loginOut">退出登录</div>
            </div>
        </div>

        <div class="track-showcase">
            <h1 class="title">用户信息</h1>
            <div style="width: 500px;margin-left: 460px">
                <el-form :model="updateUser" label-width="auto" style="max-width: 600px">
                    <el-form-item label="ID">
                        <el-input v-model="updateUser.id" readonly />
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="updateUser.name" />
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="updateUser.username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="updateUser.password" />
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="updateUser.age" />
                    </el-form-item>
                    <el-form-item label="性别" >
                        <el-radio-group v-model="updateUser.gender" style="margin-left: -260px">
                            <el-radio :value="'男'">男</el-radio>
                            <el-radio :value="'女'">女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="地址">
                        <el-input v-model="updateUser.address" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updateClick">修改</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

const user = ref(null)

const updateUser = ref({
    id: '',
    name: '',
    username: '',
    password: '',
    age: '',
    gender: '',
    address: ''
})

// 页面跳转
const toPage = (path) => {
    router.push(path)
}

// 注销登录
const loginOut = () => {
    ElMessageBox.confirm('注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        localStorage.removeItem('user')
        router.replace('/login')
    })
}

// 提交修改
const updateClick = () => {
    axios.put('http://localhost:8181/user/update', updateUser.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`用户【${updateUser.value.name}】修改成功`, '', {
                confirmButtonText: '确定',
                callback: () => {
                    location.reload()
                }
            })
        }
    })
}

// 初始化
onMounted(() => {
    const local = localStorage.getItem('user')
    if (local) {
        user.value = JSON.parse(local)
    } else {
        router.replace('/login')
        return
    }

    axios.get(`http://localhost:8181/user/getById/${user.value.id}`).then((res) => {
        updateUser.value = res.data
    })
})
</script>

<style src="../assets/css/header.css"></style>

<style scoped>
.track-showcase {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #e0f7fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    color: #00695c;
    font-size: 2.5rem;
    margin-bottom: 20px;
    animation: fadeInDown 1s;
}

/* 省略未使用的 track 样式（如 .track-card、.track-status 等） */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
